﻿@using Digital.WCFClient.ConfigService
@using System.Collections.ObjectModel
@using Digital.Common.Mvc.Extensions
@using Digital.Web.Controllers
@using Microsoft.AspNet.Identity
@model Digital.WCFClient.ConfigService.FileFolderMode
@{
    ViewBag.Title = "相册管理";
    Layout = "~/Views/Shared/_LayoutDigital.cshtml";
}
@section PageSpecificJavascriptIncludes{
    <link rel="stylesheet" href="../DigitalStyle/css/jquery.gritter.css" />
    <link rel="stylesheet" href="../DigitalStyle/css/bootstrap-fileupload.min.css" />

    <script src="../DigitalStyle/js/bootstrap-fileupload.min.js"></script>
    <script src="../DigitalStyle/js/jquery.gritter.min.js"></script>
    <script src="../DigitalStyle/js/jquery.validate.min.js"></script>
    <script src="../DigitalStyle/js/JqueryToken.js"></script>
    <script src="../DigitalStyle/js/messages_cn.js"></script>

    <script type="text/javascript" src="@Url.StaticFile("/DigitalStyle/js/flashupload.js")"></script>
}

<div class="pageheader">
    <h2><i class="fa fa-user"></i> 上传图片 <span>企业文件柜</span></h2>
    <div class="breadcrumb-wrapper">
        <span class="label">你的位置:</span>
        <ol class="breadcrumb">
            <li><a href="">企业中心</a></li>
            <li class="active">企业文件柜</li>
        </ol>
    </div>
</div>

<div class="contentpanel">
    <div class="row">

        <div class="panel panel-default">
            <div class="panel-heading">
                <div class="panel-btns">
                    <a href="" class="panel-close">&times;</a>
                    <a href="" class="minimize">&minus;</a>
                </div>
                <h4 class="panel-title">图片上传</h4>

                <form class="form-horizontal form-bordered">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">选择目标相册</label>
                        <div class="col-sm-4">
                            <select id="FolderList" class="form-control chosen-select" data-placeholder="选择相册..."></select>
                        </div>
                        <div class="col-sm-4">
                            @*<a href="" data-toggle="modal" data-target=".bs-example-modal-lg" class="btn btn-primary mr5 mb10" id="growl-primary">新建相册</a>*@
                        </div>
                    </div>
                </form>
            </div>
            <div class="panel-body panel-body-nopadding">

                <!-- BASIC WIZARD -->
                <div id="basicWizard" class="basic-wizard">

                    <ul class="nav nav-pills nav-justified">
                        @*<li><a href="#tab1" data-toggle="tab">批量上传</a></li>*@
                        <li><a href="#tab2" data-toggle="tab">单个上传</a></li>
                    </ul>

                    <div class="tab-content">
                        <div class="tab-pane" id="tab1">
                            <div class="panel-body panel-body-nopadding">

                                <div class="col-md-6">
                                    <div class="col-sm-12">
                                        <form action="files" class="form-horizontal dropzone">
                                            <div class="fallback">
                                                <input name="file" type="file" multiple />
                                            </div>
                                        </form>
                                    </div>
                                </div>

                                <div class="col-sm-6">
                                    <div class="alert alert-warning">
                                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                                        <p>
                                            <strong>上传规则</strong> ：<br>
                                            每个相册最多上传500张图片<br>
                                            普通上传一次最多可上传50张<br>
                                            单张最大5M<br>
                                            原始图片宽高超过1024像素时，系统会自动对图片进行等比例压缩<br>
                                            支持格式：<br>
                                            jpg,jpeg,bmp,png,gif（超过2M的gif图片将会丢失动画效果）<br>
                                            特别提醒：<br>
                                            为了更好的上传体验，IE浏览器用户推荐使用“高速上传”<br>

                                        </p>
                                        <p>

                                        </p>
                                    </div>
                                </div>


                                <div class="col-sm-6">
                                    <span class="sublabel">5M/200M (您的图片管家享有 200 MB容量)</span>
                                    <div class="progress progress-sm">
                                        <div style="width: 40%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40" role="progressbar" class="progress-bar progress-bar-primary"></div>
                                    </div><!-- progress -->
                                </div>


                            </div>

                        </div>

                        <div class="tab-pane" id="tab2">
                            <div class="panel-body panel-body-nopadding">
                                <form class="form-horizontal form-bordered" onsubmit="return false">
                                    @Html.AntiForgeryToken()
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">选择图片</label>
                                        <div class="col-sm-9">
                                            <div class="fileupload fileupload-new" data-provides="fileupload" id="container">
                                                <div class="input-append">
                                                    <div class="uneditable-input">
                                                        <i class="glyphicon glyphicon-file fileupload-exists"></i>
                                                        <span id="filelist" class="fileupload-preview"></span>
                                                    </div>
                                                    <span class="btn btn-default btn-file">
                                                        <span class="fileupload-new">选择图片</span>
                                                        <span class="fileupload-exists">更改</span>
                                                        <input id="pickfiles" value="" type="file" />
                                                    </span>
                                                    <a href="#" id="uploadfiles" class="btn btn-default">上传</a>
                                                </div>
                                            </div>
                                            <input id="ImagePath" type="hidden" />

                                            <img id="PersonImage" src="../DigitalStyle/images/pic-none.png" class="thumbnail img-responsive" alt="" />
                                        </div>
                                    </div>

                                    @*<div class="form-group">
                <label class="col-sm-3 control-label">选择文件</label>
                <div class="col-sm-9">
                    <div class="fileupload fileupload-new" data-provides="fileupload">
                        <div class="input-append">
                            <div class="uneditable-input">
                                <i class="glyphicon glyphicon-file fileupload-exists"></i>
                                <span class="fileupload-preview"></span>
                            </div>
                            <span class="btn btn-default btn-file">
                                <span class="fileupload-new">选择图片</span>
                                <span class="fileupload-exists">Change</span>
                                <input type="file" />
                            </span>
                            <a href="#" class="btn btn-default fileupload-exists" data-dismiss="fileupload">Remove</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">选择文件</label>
                <div class="col-sm-9">
                    <div class="fileupload fileupload-new" data-provides="fileupload">
                        <div class="input-append">
                            <div class="uneditable-input">
                                <i class="glyphicon glyphicon-file fileupload-exists"></i>
                                <span class="fileupload-preview"></span>
                            </div>
                            <span class="btn btn-default btn-file">
                                <span class="fileupload-new">选择图片</span>
                                <span class="fileupload-exists">Change</span>
                                <input type="file" />
                            </span>
                            <a href="#" class="btn btn-default fileupload-exists" data-dismiss="fileupload">Remove</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">选择文件</label>
                <div class="col-sm-9">
                    <div class="fileupload fileupload-new" data-provides="fileupload">
                        <div class="input-append">
                            <div class="uneditable-input">
                                <i class="glyphicon glyphicon-file fileupload-exists"></i>
                                <span class="fileupload-preview"></span>
                            </div>
                            <span class="btn btn-default btn-file">
                                <span class="fileupload-new">选择图片</span>
                                <span class="fileupload-exists">Change</span>
                                <input type="file" />
                            </span>
                            <a href="#" class="btn btn-default fileupload-exists" data-dismiss="fileupload">Remove</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">水印设置</label>
                <div class="col-sm-9">
                    <div class="ckbox ckbox-success">
                        <input type="checkbox" value="1" id="checkboxDefault" checked="checked" />
                        <label for="checkboxDefault">为上传的图片设置水印</label>
                    </div>

                    <div class="ckbox ckbox-danger">
                        <a href="" class="mr5 mb10" id="growl-primary">水印设置</a>
                    </div>
                </div>

            </div>*@

                                </form>
                            </div>

                            @*<div class="panel-footer">
                                    <div class="row">
                                        <div class="col-sm-6 col-sm-offset-3">
                                            <button class="btn btn-primary">开始上传</button>&nbsp;
                                            <button class="btn btn-default">取消</button>
                                        </div>
                                    </div>
                                </div>*@
                        </div>



                    </div>
                </div>

            </div><!-- tab-content -->
            @*<ul class="pager wizard">
                    <li class="previous"><a href="javascript:void(0)">上一步</a></li>
                    <li class="next"><a href="javascript:void(0)">下一步</a></li>
                </ul>*@

        </div><!-- #basicWizard -->

    </div><!-- panel-body -->
</div>


<script>
    function callback(msg) {
        $("#ImagePath").val(msg.msg.url);
        $("#PersonImage")[0].src = msg.msg.url;
        if (typeof (msg) != "undefined" && msg != null && msg.msg.url != "") {
            SaveInfo(true,"上传图片");
        }
    }

    jQuery(document).ready(function () {
        //select option : Picture Folders List
        var Folderjsons =@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject((List<FileFolderMode>)ViewBag.DirectoryList))
        DropOptionFolders(Folderjsons, $("#FolderList"), 1);

        var selectedFolder = $.jsparams.select("FolderList");

        $("#FolderList").change(function () {
            selectedFolder = $(this).val();
            //alert(selectedFolder);
            $('#uploader').FileUpload({
                'subfolder': 'UserInfo' + '@Digital.Common.CryptoService.MD5Encrypt(User.Identity.GetUserId(),Digital.Common.SerurityType.UserInfoFolder)',
                'ImageId': '',
                'subSubFolderCode': selectedFolder
            });
        });

        //alert(selectedFolder);
        $('#uploader').FileUpload({
            'subfolder': 'UserInfo' + '@Digital.Common.CryptoService.MD5Encrypt(User.Identity.GetUserId(),Digital.Common.SerurityType.UserInfoFolder)',
            'ImageId': '',
            'subSubFolderCode': selectedFolder
        });

        // Chosen Select
        jQuery(".chosen-select").chosen({ 'width': '100%', 'white-space': 'nowrap' });

        // Basic Wizard
        //jQuery('#basicWizard').bootstrapWizard();

        // With Form Validation Wizard
        var $validator = jQuery("#firstForm").validate({
            highlight: function (element) {
                jQuery(element).closest('.form-group').removeClass('has-success').addClass('has-error');
            },
            success: function (element) {
                jQuery(element).closest('.form-group').removeClass('has-error');
            }
        });

        //jQuery('#validationWizard').bootstrapWizard({
        //    tabClass: 'nav nav-pills nav-justified nav-disabled-click',
        //    onTabClick: function (tab, navigation, index) {
        //        return false;
        //    },
        //    onNext: function (tab, navigation, index) {
        //        var $valid = jQuery('#firstForm').valid();
        //        if (!$valid) {

        //            $validator.focusInvalid();
        //            return false;
        //        }
        //    }
        //});

        window.onload = function () {
            // Listen to the double click event.
            if (window.addEventListener)
                document.body.addEventListener('dblclick', onDoubleClick, false);
            else if (window.attachEvent)
                document.body.attachEvent('ondblclick', onDoubleClick);
        };

        function onDoubleClick(ev) {
            // Get the element which fired the event. This is not necessarily the
            // element to which the event has been attached.
            var element = ev.target || ev.srcElement;

            // Find out the div that holds this element.
            var name;

            do {
                element = element.parentNode;
            }
            while (element && (name = element.nodeName.toLowerCase()) &&
                (name != 'div' || element.className.indexOf('editable') == -1) && name != 'body');

            if (name == 'div' && element.className.indexOf('editable') != -1)
                replaceDiv(element);
        }
    });


</script>





